<template>
    <div style="margin: 50px 3% 20px 3%" class="gamesContainer">
        <div class="game" v-for="item in games" :key="item.id">
            <RouterLink :to="item.router">
                <img :src="item.pic" alt="">
                <div class="gameInfo">
                    <p class="category">{{ item.category }}</p>
                    <p class="title">{{ item.title }}</p>
                </div>
            </RouterLink>
        </div>
    </div>
</template>

<script setup>
import {reactive} from "vue";

const games = reactive([
    {
        id: '001',
        category: '3v3 and battle royale',
        title: 'Brawl Stars',
        pic: '/src/assets/img/games/indexGames/Brawl01.webp',
        router: '/games/brawlstars'
    }, {
        id: '002',
        category: 'Epic real-time card battles',
        title: 'Clash Royale',
        pic: '/src/assets/img/games/indexGames/Royale03.webp',
        router: '/games/clashroyale'
    }, {
        id: '003',
        category: 'Build. plan. boom!',
        title: 'Boom Beach',
        pic: '/src/assets/img/games/indexGames/Beach04.webp',
        router: '/games/boombeach'
    }, {
        id: '004',
        category: 'Lead your clan to victory!',
        title: 'Clash of Clans',
        pic: '/src/assets/img/games/indexGames/Clans05.webp',
        router: '/games/clashofclans'
    }, {
        id: '005',
        category: 'Farm with friends and family',
        title: 'Hay Day',
        pic: '/src/assets/img/games/indexGames/Farm02.webp',
        router: '/games/hayday'
    }
])
</script>

<style scoped>
.gamesContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.game {
    width: calc(50% - 20px);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.game a {
    text-decoration: none;
}

.game:hover {
    transform: scale(1.02);
}

.game img {
    width: 100%;
    height: auto;
}

.gameInfo {
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

.category {
    color: #fb4a9d;
    font-size: 14px;
    text-transform: uppercase;
}

.title {
    color: #000;
    font-size: 24px;
}
</style>